@import "common";
@import "test";
/**
* 定义行宽
*/
@span-margin-LR: (5px * 2);
@span-width: (@client-page-width / 10);
.span1{
  width: (1 * @span-width);
}
.span2{
  width: (2 * @span-width);
}
.span3{
  width: (3 * @span-width);
}
.span4{
  width: (4 * @span-width);
}
.span5{
  width: (5 * @span-width);
}
.span6{
  width: (6 * @span-width);
}
.span7{
  width: (7 * @span-width);
}
.span8{
  width: (8 * @span-width);
}
.span9{
  width: (9 * @span-width);
}
.span10{
  width: (10 * @span-width);
}
/**
* 标准 主体 容器
* 一下 定义的布局容器 必须在
* main-container 才有作用
*/
div.main-container{
  width: @client-page-width;
  /* 页面 左右向内挤压 10px */
  padding: 0 5px;
  div.column-parts{
    div.column{
      div.column-part-header{

      }
      div.column-part-body{

      }
      div.column-part-footer{

      }
    }
  }
}
/**
* 存活在 column-parts 上下文 中的组件
*/
div.arow-parts{
  div.arow{
    div.arow-part-body{
      // 1. select-tab 实现样式
      div.select-list-1{
        @body-width:  @client-page-width - (2 * 10px);
        width: @body-width;
        // sub componment var
        @select-btn-group-width: 207px; /* bg image width */
        height: 300px;
        //.bg-green();
        .select-btn-group{
          float: left;
          width: @select-btn-group-width;
          .select-btn{
            padding: 5px;
            height: 57px - (2 * 5px);
            background: transparent url(../images/component/line_left.gif) left center;
            border-bottom: 1px #f2f2f2 solid;
            a{
              //.bg-yellow();
              height: 57px - (2 * 5px);
              line-height: 57px - (2 * 5px);
              color: #333333;
              font-size: 18px;
              display: block;
              margin-left: 55px;
              text-decoration: none;
            }
            &.active{
              background: #ffffff url(../images/component/back_alt.gif) no-repeat 20px center;
              & + li{ /* 下一个相邻节点 */
                background: transparent url(../images/component/line_left_shadow.gif) left center;
              }
            }
          }
        }
        .select-content-panel{
          @select-panel-width: @body-width - @select-btn-group-width - (2 * 20px);
          padding:0 20px;
          float: left;
          //.bg-blue();
          color: #787878;
          width: @select-panel-width;
          //.bg-blue();
          .item-content-panel{
            display: none;
            &.active{
              display: block;
            }
            p{
              text-indent: 2em;
              img{
                float: left;
                margin-bottom: 20px;
                margin-right: 20px;
              }
            }
            ul{
              clear: both;
              li{
                margin-bottom: 8px;
                padding-left: 20px;
                font-size: 12px;
                display: block; /* 消除 父亲节点的 li 的继承 display:none; */
                background: transparent url(../images/dot.jpg) no-repeat left center;
              }
            }
          }
        }
      }
      /*
        select-tab-2 组件
      */
      div.select-tab-2{
        .select-btn-group{
          background: #fdfdfd url('../images/component/tsbtbg.jpg') repeat-x left center;
          font-size:0;  /* display: inline-block; bug */
          .select-btn{
            display: inline-block;
            *display:inline; *zoom: 1; /* ie6 */
            height: 40px;
            line-height: 40px;
            //.bg-green();
            a{
              font-size: 16px;
              padding: 10px 20px;
              text-decoration: none;
              color: #acacac;
              &:hover{
                color: #000000;
              }
            }
            &.active{
              border-bottom: 1px solid #ffffff;
              a{
                font-weight: bold;
              }
              & + .select-btn{
                background: transparent url('../images/component/shadow.jpg') no-repeat left center;
              }
            }
          }
        }

        .select-content-panel{
          .item-content-panel{
            display: none;
            &.active{
              display: block;
            }
          }
        }

      }

      /**
      * 文章内容 列表 组件 post-list-1
      */
      div.post-list-1{
        ul{
          li{
            padding: 10px 0px;
            height: 190px;
            border-bottom: 1px dashed #c6c6c6;
            margin-bottom: 20px;
            //.bg-green();
            div.img{
              padding: 5px;
              border: solid 1px #d8d8d8;
                -webkiFt-border-radius: 5px;
                -moz-border-radius: 5px;
                border-radius: 5px;
              box-shadow: 0px 1px 5px rgba(200, 200, 200, 0.75);
                -webkit-box-shadow: 0px 1px 5px rgba(200, 200, 200, 0.75);
                -moz-box-shadow: 0px 1px 5px rgba(200, 200, 200, 0.75);
              float: left;
              img{
                border: 1px solid #b5b5b5;
              }
            }
            div.content-desc{
              margin-left: 20px;
              width: 70%;
              float: left;
              h3.title{
                margin-bottom: 15px;
                a{
                  font-size: 16px;
                  color: #0287c2;
                  text-decoration: none;
                }
              }
              div.post-brief{
                font-size: 12px;
                line-height: 24px;
                color: #686868;
                p{
                  text-indent: 2em;
                }
              }
              a.cat-full-post{
                float: right;
                margin-right: 40px;
                font-size: 12px;
                color: #0287c2;
                text-decoration: none;
              }
            }
          }
        }
      }
      /**
      * 文章内容 列表 组件 在 post-list-1 基础上 打上 补丁 变成 post-list-1patch2
      */

      div.post-list-1patch1{
        ul{
          li{
            height: 220px;
            div.content-desc{

              a.cat-full-post{
                font-size: 12px;
                padding: 6px 12px;
                margin-bottom: 20px;
                background: #3d6fb4;
                color: #fff;
                -webkit-border-radius: 5px;
                -moz-border-radius: 5px;
                border-radius: 5px;
              }
            }
            div.post-info-bar{
              clear: both;
              float: right;
              height: 40px;
              //background-color: green;
              ul.part{
                height: 40px;
                //background-color: #ff0000;
                float: left;
                margin-right: 30px;
                li{
                   border: none;
                   display: inline-block;
                   *display: inline;
                   *zoom: 1;
                    font-size: 12px;
                    a.label{
                      color: #000;
                    }
                    a{
                      color: @base-blue-color;
                      text-decoration: none;
                    }

                  &.post-updateTime{
                    margin-right: 8px;
                    a{
                      text-decoration: none;
                    }
                    a.icon{
                      padding-left: 18px;
                      background: #ffffff url("../images/component/post-info-gray-icon.jpg") no-repeat 0 -16px;
                    }
                  }

                  &.post-creater{
                    a.icon{
                      padding-left: 18px;
                      background: #ffffff url("../images/component/post-info-gray-icon.jpg") no-repeat 0 -32px;
                    }
                  }
                  &.post-category{
                    margin-right: 8px;
                  }
                  &.post-tags{
                  }
                }
              }
            }
          }
        }
      }

    }
    /**
      pager 组件
    */
    div.pager{
      ul{
        font-size: 0; /*  消除 li 的间隙 */
        li{
          //font-size: 16px; /* 还原 回默认值 */
          font-size: 12px;
          display: inline-block;
          *display: inline; *zoom: 1; /* ie6 */
          height: 25px; min-width: 30px;
          line-height: 25px; text-align: center;
          padding: 2px 2px 2px 3px;
          border: 1px solid #c6c6c6;
          border-right: none;

          color: @base-blue-color;

          a{
            color: @base-blue-color;
            height: 25px;
            display: block;
            text-decoration: none;
            padding: 0 3px;
            text-align: center;
          }
          &.first{
            border-right: none;
            min-width: 40px;
          }
          &:first-child{
            border-radius: 2px 0 0 2px;
          }
          &:last-child{
            border-radius: 0 2px 2px 0;
          }
          &.last{
            min-width: 40px;
          }
          &.total{
            border-right: 1px solid #c6c6c6;;
          }
        }
      }
    }

    /**
    * 站内 向标组件
    */
    div.site-map{
      ul{
        font-size: 0; /* 消除间隙 */
        li{
          height: 20px; line-height: 18px;
          padding: 3px 0 3px 10px; margin:5px 3px;
          display: inline-block;
          *display: inline;
          *zoom: 1;
          font-size: 16px; /* 还原 字体默认值 */

          color: #767676;
          font-size: 12px;
          a{
            color: #767676;
            text-decoration: none;
          }
          &.item{
            background: #ffffff url('../images/list-style-icon1.jpg') no-repeat left center;
          }
          &.first{
            margin-left: 0;
            background: none;
          }
          &.label{
            background: none;
          }
        }
      }
    }

    /*
     * post-container POST 文章 容器
     *
    */

    div.post-container-1{
      div.post-header{
          background-color: #ffffff;
          height: 80px;
          border-bottom: 1px dashed #c6c6c6;
          margin-bottom: 50px;
          h2.post-title{
            font-size: 22px;
            text-align: center;
          }
          div.post-info-bar{
            margin-top: 30px;
            float: right;
            font-size: 12px;
            div{
              display: inline-block;
              *display: inline;
              *zoom: 1;

              margin-right: 10px;
              padding-left: 20px;
            }
            div.post-click{
              background: #ffffff url("../images/component/post-info-gray-icon.jpg") no-repeat 0px -0px;
            }
            div.post-updateTime{
              background: #ffffff url("../images/component/post-info-gray-icon.jpg") no-repeat 0 -16px;
            }
          }
      }
      div.post-content{
        padding: 0 15px;
        border-bottom: 1px solid #c6c6c6;
        p{
          margin-bottom: 10px;
          padding: 5px 0;
          line-height: 26px;
          text-indent: 2em;
          font-size: 13px;
          color: #686868;
        }
        img.img1{
          float: left;
          margin: 5px 25px 15px 5px;
        }
        img{
          margin: 10px;
        }
      }
    }

  }
}
